<template>
  <div style="display: flex;flex-direction: column;width: 80%;color: #000000">
    <el-form ref="formRef" v-model="formData">
      <el-form-item prop="oldPassword">
        <el-input type="password" size="large" v-model="formData.oldPassword" label="旧密码" placeholder="输入旧密码"></el-input>
      </el-form-item>
      <el-form-item prop="newPassword">
        <el-input type="password" size="large" v-model="formData.newPassword" label="新密码" placeholder="输入新密码"></el-input>
      </el-form-item>
      <el-form-item prop="confirmPassword">
        <el-input type="password" size="large" v-model="formData.confirmPassword" label="确认新密码" placeholder="确认新密码"></el-input>
      </el-form-item>
      <el-button type="primary" size="default" @click="modifyPassword">保 存</el-button>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
  import {useRouter} from "vue-router";
import {editPwd} from "@/api/account.ts";
import storage from "@/utils/storage.ts";
import {ElMessage} from "element-plus";

  const router = useRouter()
  const activeMenuItem = router.currentRoute.value.path;
  const activeName = "/profile";
  const formRef = ref()
  const formData = ref({
    oldPassword: "",
    newPassword: "",
    confirmPassword: "",
  })
  const user = ref({})

  const modifyPassword = () => {
    console.log('password',formData.value);
    formData.value.memberId = user.value.id
    editPwd(formData.value).then((res) => {
      if(res.code === '00000' && res.data === true){
        ElMessage.success('修改成功')
      }else {
        ElMessage.error(res.msg);
      }
    })
  }
  onMounted(()=>{
    user.value = JSON.parse(storage.getItem("userInfo"))
  })
</script>

<style scoped>

</style>